<template>
  <view class="contact-container">
    <!-- 顶部导航 -->
    <NavigationBar title="联系我们" />
    <!-- 顶部背景装饰 -->
    <view class="top-decoration">
      <image
        src="https://picsum.photos/seed/beauty-header/800/300"
        mode="aspectFill"
        class="w-full h-60 rounded-b-3xl opacity-90"
      ></image>
      <view class="top-overlay">
        <view class="px-6 pb-12">
          <text class="text-3xl font-bold text-white">联系我们</text>
          <view class="mt-2 text-white opacity-90"
            >优雅环境，专业服务，期待您的光临</view
          >
        </view>
      </view>
    </view>

    <view class="content-wrapper">
      <!-- Markdown内容渲染 -->
      <view class="markdown-container">
        <rich-text
          :nodes="markdownContent"
          class="markdown-content"
        ></rich-text>
      </view>

      <!-- 预约咨询 -->
      <view class="appointment-card" @tap="callPhone">
        <view class="appointment-icon">
          <img
            src="@/static/public/icon_phone.svg"
            alt=""
            class="w-full h-full phone-icon"
          />
        </view>
        <view class="appointment-text">
          <text class="appointment-title">立即预约</text>
          <text class="appointment-desc">一键拨打预约电话</text>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-area-bottom"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavigationBar from "@/components/navigationBar/index.vue";

import { ref, onMounted } from "vue";

// 联系我们的内容
const markdownContent = ref<string>("");

// JSON示例数据
const defaultContactJson = JSON.stringify({
  content: `<div class="contact-info">
    <h2 class="section-title">联系方式</h2>
    
    <div class="info-group">
      <h3 class="info-title">门店地址</h3>
      <p class="info-text"><strong>佛山市禅城区南庄二马路106号、108号圣德嘉园1座15.16.17号铺</strong></p>
    </div>
    
    <div class="info-group">
      <h3 class="info-title">预约电话</h3>
      <p class="info-text"><strong>15976606087</strong></p>
    </div>
    
    <div class="info-group">
      <h3 class="info-title">营业时间</h3>
      <p class="info-text">周一至周日 9:30-9:30（节假日不休）</p>
    </div>
    
    <div class="info-group">
      <h3 class="info-title">公众号</h3>
      <p class="info-text">浣颜美容养生会所</p>
    </div>
  </div>`,
});

// 获取联系我们页面内容
const fetchContactInfo = async () => {
  try {
    // 先使用默认JSON
    const defaultData = JSON.parse(defaultContactJson);
    markdownContent.value = defaultData.content;

    // 这里替换为你的实际API请求
    const response: any = await uni.request({
      url: "/api/contact-info",
      method: "GET",
    });

    if (response.data && response.data.content) {
      // 直接使用返回的HTML内容
      markdownContent.value = response.data.content;
    }
  } catch (error) {
    console.error("获取联系信息失败:", error);
    // 如果发生错误，确保至少显示默认内容
    try {
      const defaultData = JSON.parse(defaultContactJson);
      markdownContent.value = defaultData.content;
    } catch {
      markdownContent.value = "<p>获取联系信息失败，请稍后再试</p>";
    }
  }
};

// 拨打电话
const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: "15976606087",
    fail: () => {
      uni.showToast({
        title: "拨打电话失败",
        icon: "none",
      });
    },
  });
};

// 页面加载时获取数据
onMounted(() => {
  fetchContactInfo();
});
</script>

<style lang="scss" scoped>
.contact-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #faf8f5 0%, #f5f2ee 100%);
  position: relative;

  .iconfont {
    font-family: "iconfont";
  }
}

.top-decoration {
  position: relative;
  height: 340rpx; // 增加顶部高度
  overflow: hidden;

  .top-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to right,
      rgba(175, 108, 49, 0.8),
      rgba(212, 165, 116, 0.7)
    );
    display: flex;
    align-items: center;
  }
}

.content-wrapper {
  margin-top: -120rpx; // 调整上边距，减少遮挡
  padding: 0 30rpx 80rpx;
  position: relative;
  z-index: 10;
}

.markdown-container {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 30rpx rgba(175, 108, 49, 0.1);
  margin-bottom: 50rpx;
  border: 1px solid rgba(175, 108, 49, 0.1);
}

.markdown-content {
  width: 100%;

  :deep(h1),
  :deep(h2) {
    font-size: 34rpx;
    font-weight: 600;
    color: #af6c31;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #e3c377;
  }

  :deep(h3),
  :deep(h4) {
    font-size: 30rpx;
    font-weight: 500;
    color: #af6c31;
    margin-bottom: 16rpx;
  }

  :deep(p) {
    font-size: 28rpx;
    color: #4b5563;
    margin-bottom: 16rpx;
    line-height: 1.6;
  }

  :deep(ul),
  :deep(ol) {
    padding-left: 30rpx;
    margin-bottom: 20rpx;
  }

  :deep(li) {
    font-size: 28rpx;
    color: #4b5563;
    margin-bottom: 10rpx;
  }

  :deep(a) {
    color: #af6c31;
    text-decoration: none;
  }

  :deep(img) {
    max-width: 100%;
    border-radius: 8rpx;
    margin: 16rpx 0;
  }

  :deep(blockquote) {
    border-left: 4rpx solid #af6c31;
    padding-left: 16rpx;
    color: #6b7280;
    margin: 16rpx 0;
  }
}

.appointment-card {
  width: 100%;
  background: linear-gradient(135deg, #af6c31, #d4a574);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(175, 108, 49, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
  transition: all 0.3s ease;

  .appointment-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16rpx;
    padding: 20rpx;

    .iconfont {
      font-size: 40rpx;
    }

    .phone-icon {
      filter: brightness(0) invert(1);
      width: 40rpx;
      height: 40rpx;
    }
  }

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 15rpx rgba(175, 108, 49, 0.2);
  }

  .appointment-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
  }

  .appointment-desc {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4rpx;
  }
}

.safe-area-bottom {
  height: 40rpx; // 添加底部安全区域
}
</style>
